<template>
  <view class="payment-section">
    <view class="section-title">支付方式</view>
    <wd-radio-group
      v-model="props.paymentType"
      checked-color="#ff5f15"
      shape="dot"
      @change="change"
    >
      <view class="payment-option">
        <wd-radio :value="PayTypeEnum.BALANCE" style="width: 100%">
          <view class="left">
            <view style="font-size: 42rpx" class="icon-balance iconfont"></view>
            <text style="font-size: 28rpx">余额</text>
          </view>
        </wd-radio>
      </view>
      <view class="payment-option">
        <wd-radio :value="PayTypeEnum.ALIPAY" style="width: 100%">
          <view class="left">
            <view style="font-size: 54rpx" class="icon-zhifubaozhifu iconfont"></view>
            <text style="font-size: 28rpx">支付宝</text>
          </view>
        </wd-radio>
      </view>
      <!-- <view class="payment-option">
        <wd-radio :value="PayTypeEnum.WXPAY" style="width: 100%">
          <view class="left">
            <view style="font-size: 42rpx" class="icon-zhifu-weixinzhifu iconfont"></view>
            <text style="font-size: 28rpx">微信</text>
          </view>
        </wd-radio>
      </view> -->
    </wd-radio-group>
  </view>
</template>

<script lang="ts" setup>
import { PayTypeEnum } from '@/service/order/orderEnum.d'
interface Props {
  paymentType?: PayTypeEnum
}
const props = withDefaults(defineProps<Props>(), {
  paymentType: PayTypeEnum.BALANCE,
})
const emit = defineEmits(['update:paymentType'])
const change = (e) => {
  console.log(e)
  emit('update:paymentType', e)
}
</script>

<style lang="scss" scoped>
.payment-section {
  align-items: center;
  padding: 30rpx;
  margin: 20rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  .payment-option {
    display: flex;
    align-items: center;
    justify-content: start;
    .left {
      display: flex;
      view {
        margin-right: 20rpx;
      }
    }
  }
}
</style>
